<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0042)http://jscs.cloudapp.net/ControlsSample/CM -->
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <TITLE></TITLE>
    <LINK href="../contextmenu.css" rel="stylesheet" type="text/css" />
    <link  href="../../../../themes/default/ui.css" type="text/css" rel="stylesheet" />
    <script src="../../../../scripts/jquery.js" type="text/javascript"></script>
    <SCRIPT src="../jquery.contextmenu.js" type="text/javascript"></SCRIPT>  
    
    <!-- 换肤 -->
	<script type="text/javascript" src="../../../theme_cookie.js"></script>
    
    <SCRIPT type="text/javascript">
         function editUser(){
         	alert("edit user( userId = " + this.data.userId + ")");
         }
         
         function deleteUser(){
         	alert("delete user( userId = " + this.data.userId + ")");
         }
         
         function assignRole(){
         	alert("assign role for user( userId = " + this.data.userId + ")");
         }
         
         function assignAuth(){
         	alert("assign auth for user( userId = " + this.data.userId + ")");
         }
         
         function openContextMenu(e,jqueryObject){
         	//标注：使用jqueryObject的attr方法获取属性的值有问题（获取不到）。
         	var accountType = jqueryObject.get(0).getAttribute("account_type");
         	var userId = jqueryObject.get(0).getAttribute("user_id");
         	
         	var menuItems  = [];
         	
         	if(accountType == 'local'){
         		 menuItems.push({ text: "修改用户", icon: "images/icon_edit.gif", alias: "edit", action: editUser, userId : userId });
	        	 menuItems.push({ text: "删除用户", icon: "images/icon_del.gif", alias: "delete", action: deleteUser, userId : userId });
	        	 menuItems.push({ type: "splitLine" });
         	}
        	menuItems.push({ text: "分配角色", icon: "images/icon_assign_role.gif", alias: "assign_role", action: assignRole, userId : userId });
        	menuItems.push({ text: "分配权限", icon: "images/icon_assign_auth.gif", alias: "assign_auth", action: assignAuth, userId : userId });
        	 
            var option = { 
            			   width: 150, 
        	               items:menuItems
                         };
                       
        	jqueryObject.contextmenu(option);
        	jqueryObject.contextmenu().show(e);
         }
            
        $(function(){
        	 $('.operation').mouseover( function(e){
        	 	 openContextMenu(e,$(this));
        	 } ) ;
        });
    </SCRIPT>
</HEAD>
	<BODY>
		<div style="padding: 20px">
			<table  border="1" width="100%">
				<tr>
					<td align="center" style="vertical-align: middle;">操作</td>
					<td align="center">用户名</td>
					<td align="center">登录账号</td>
					<td align="center">账号类型</td>
				</tr>
				<tr>
					<td align="center"><img src="images/icon_set.gif" user_id="security_admin" style="cursor: pointer;" class="operation" account_type="local" /></td>
					<td>超级管理员</td>
					<td>security_admin</td>
					<td>本地账号</td>
				</tr>
				<tr>
					<td align="center"><img src="images/icon_set.gif" style="cursor: pointer;" class="operation"  accout_type="local" user_id="zhangsan"/></td>
					<td>张三</td>
					<td>zhangsan</td>
					<td>本地账号</td>
				</tr>
				<tr>
					<td align="center"><img src="images/icon_set.gif" style="cursor: pointer;" class="operation"  accout_type="portal" user_id="lisi"/></td>
					<td>李四</td>
					<td>lisi</td>
					<td>Portal账号</td>
				</tr>
			</table>
		</div>
	</BODY>
</HTML>